<template>
  <div class="home-container">
    <!-- Top Statistics -->
    <div class="top-statistics">
      <div class="stat-item" v-for="stat in topStatistics" :key="stat.title">
        <div class="icon">{{ stat.icon }}</div>
        <div class="details">
          <div class="title">{{ stat.title }}</div>
          <div class="value">{{ stat.value }}</div>
        </div>
      </div>
    </div>

    <!-- Pending Tasks -->
    <div class="pending-tasks">
      <h3>待处理事务</h3>
      <div class="task-item" v-for="task in pendingTasks" :key="task.title">
        <div class="title">{{ task.title }}</div>
        <div class="count">({{ task.count }})</div>
      </div>
    </div>

    <!-- Operation Shortcuts -->
    <div class="operation-shortcuts">
      <h3>运营快捷入口</h3>
      <div class="shortcut-item" v-for="shortcut in operationShortcuts" :key="shortcut.text">
        <div class="icon">{{ shortcut.icon }}</div>
        <div class="text">{{ shortcut.text }}</div>
      </div>
    </div>

    <!-- Product and User Overview -->
    <div class="overview">
      <div class="section product-overview">
        <h3>商品总览</h3>
        <div class="overview-item" v-for="item in productOverview" :key="item.title">
          <div class="value">{{ item.value }}</div>
          <div class="title">{{ item.title }}</div>
        </div>
      </div>
      <div class="section user-overview">
        <h3>用户总览</h3>
        <div class="overview-item" v-for="item in userOverview" :key="item.title">
          <div class="value">{{ item.value }}</div>
          <div class="title">{{ item.title }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    // Top Statistics Data
    const topStatistics = ref([
      { title: '今日订单总数', value: '200', icon: '订单' },
      { title: '今日销售总额', value: '¥5000.00', icon: '销售额' },
      { title: '昨日销售总额', value: '¥5000.00', icon: '销售额' },
      { title: '近7天销售总额', value: '¥50000.00', icon: '销售额' },
    ]);

    // Pending Tasks Data
    const pendingTasks = ref([
      { title: '待付款订单', count: 10 },
      { title: '已完成订单', count: 10 },
      { title: '待确认退货订单', count: 10 },
      { title: '待发货订单', count: 10 },
      { title: '新缺货登记', count: 10 },
      { title: '待处理退款申请', count: 10 },
      { title: '已发货订单', count: 10 },
      { title: '待处理退货订单', count: 10 },
      { title: '广告位即将到期', count: 10 },
    ]);

    // Operation Shortcuts Data
    const operationShortcuts = ref([
      { icon: '+', text: '添加商品' },
      { icon: '订单', text: '订单列表' },
      { icon: '用户', text: '用户管理' },
      { icon: '统计', text: '交易统计' },
      { icon: '短信', text: '短信营销' },
      { icon: '广告', text: '广告管理' },
      { icon: '专题', text: '专题管理' },
      { icon: '秒杀', text: '秒杀管理' },
      { icon: '新品', text: '新品推荐' },
    ]);

    // Product and User Overview Data
    const productOverview = ref([
      { title: '已下架', value: '100' },
      { title: '已上架', value: '400' },
      { title: '库存紧张', value: '50' },
      { title: '全部商品', value: '500' },
    ]);

    const userOverview = ref([
      { title: '今日新增', value: '100' },
      { title: '昨日新增', value: '200' },
      { title: '本月新增', value: '1000' },
      { title: '会员总数', value: '5000' },
    ]);

    return {
      topStatistics,
      pendingTasks,
      operationShortcuts,
      productOverview,
      userOverview,
    };
  },
});
</script>

<style scoped>
.home-container {
  padding: 2rem;
  font-family: 'Roboto', sans-serif, 'Noto Sans SC', sans-serif;
  color: #333;
  background-color: #f0f2f5;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Top Statistics */
.top-statistics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.stat-item {
  background: linear-gradient(135deg, #e6f7ff, #ffffff);
  padding: 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.stat-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.stat-item .icon {
  font-size: 2rem;
  margin-right: 1rem;
  color: #1890ff;
}

.stat-item .details .title {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: #666;
}

.stat-item .details .value {
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
}

/* Pending Tasks */
.pending-tasks {
  padding: 1.5rem;
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: block;
}

.pending-tasks h3 {
  margin-bottom: 1rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
}

.task-item {
  display: inline-block;
  margin-right: 1.5rem;
  margin-bottom: 1rem;
  width: 200px;
  vertical-align: middle;
  cursor: pointer;
  transition: transform 0.2s;
  &:hover {
    transform: translateY(-5px);
  }
}

.task-item .title {
  font-size: 0.875rem;
  color: #666;
}

.task-item .count {
  font-size: 0.875rem;
  color: #ff4d4f;
}

/* Operation Shortcuts */
.operation-shortcuts {
  padding: 1.5rem;
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
  align-items: flex-start;
  align-content: flex-start;
}

.operation-shortcuts h3 {
  margin-bottom: 1rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
}

.shortcut-item {
  display: inline-block;
  margin-right: 1.5rem;
  margin-bottom: 1rem;
  vertical-align: middle;
  cursor: pointer;
  transition: transform 0.2s;
  &:hover {
    transform: translateY(-5px);
  }
}

.shortcut-item .icon {
  font-size: 1.25rem;
  margin-right: 0.5rem;
  color: #1890ff;
}

.shortcut-item .text {
  font-size: 0.875rem;
  color: #333;
}

/* Overview */
.overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.section {
  padding: 1.5rem;
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.section h3 {
  margin-bottom: 1rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
}

.overview-item {
  display: inline-block;
  margin-right: 1.5rem;
  margin-bottom: 1rem;
}

.overview-item .value {
  font-size: 1.125rem;
  font-weight: 600;
  color: #ff4d4f;
}

.overview-item .title {
  font-size: 0.875rem;
  color: #666;
}
</style>